// 一：修改table表格
var trs = $('.flag')
for (let i = 0; i < trs.length; i++) {
    if (i % 2 != 0) {
        tr = trs.eq(i)
        tr.css('background-color', '#f3f3f5')
    }
}

// 随机颜色数组
//获取随机颜色方法
function getRandomColor() {
    var color_arr = ['#97846c', '#f3bf4c', '#9eccab', '#57c3c2', '#806d9e', '#983680', '#382129', '#b2cf87', '#c1b2a3', '#f19790', '#f68c60', '#f6ad8f', '#edc3ae', '#bbb5ac', '#826b48', '#393733', '#b4a992', '#b7d07a', '#8cc269', '#57c3c2', '#0eb0c9', '#5698c3'];
    var num = Math.floor(Math.random() * color_arr.length);
    color = color_arr[num];
    return color;
}


$('.stick-tag:first-child').css({
    'background-color': getRandomColor(),
    'box-shadow': '0 0 3px rgba(0,0,0,0.5)'
})


$('.stick-tag:nth-child(20n-18)').css({
    'background-color': getRandomColor(),
    'box-shadow': '0 0 3px rgba(0,0,0,0.5)'
})

$('.stick-tag:nth-child(20n-17)').css({
    'background-color': getRandomColor(),
    'box-shadow': '0 0 3px rgba(0,0,0,0.5)'
})

$('.stick-tag:nth-child(20n-16)').css({
    'background-color': getRandomColor(),
    'box-shadow': '0 0 3px rgba(0,0,0,0.5)'
})

$('.stick-tag:nth-child(20n-15)').css({
    'background-color': getRandomColor(),
    'box-shadow': '0 0 3px rgba(0,0,0,0.5)'
})

$('.stick-tag:nth-child(20n-14)').css({
    'background-color': getRandomColor(),
    'box-shadow': '0 0 3px rgba(0,0,0,0.5)'
})

$('.stick-tag:nth-child(20n-13)').css({
    'background-color': getRandomColor(),
    'box-shadow': '0 0 3px rgba(0,0,0,0.5)'
})

$('.stick-tag:nth-child(20n-12)').css({
    'background-color': getRandomColor(),
    'box-shadow': '0 0 3px rgba(0,0,0,0.5)'
})

$('.stick-tag:nth-child(20n-11)').css({
    'background-color': getRandomColor(),
    'box-shadow': '0 0 3px rgba(0,0,0,0.5)'
})

$('.stick-tag:nth-child(20n-10)').css({
    'background-color': getRandomColor(),
    'box-shadow': '0 0 3px rgba(0,0,0,0.5)'
})

$('.stick-tag:nth-child(20n-9)').css({
    'background-color': getRandomColor(),
    'box-shadow': '0 0 3px rgba(0,0,0,0.5)'
})

$('.stick-tag:nth-child(20n-8)').css({
    'background-color': getRandomColor(),
    'box-shadow': '0 0 3px rgba(0,0,0,0.5)'
})

$('.stick-tag:nth-child(20n-7)').css({
    'background-color': getRandomColor(),
    'box-shadow': '0 0 3px rgba(0,0,0,0.5)'
})

$('.stick-tag:nth-child(20n-6)').css({
    'background-color': getRandomColor(),
    'box-shadow': '0 0 3px rgba(0,0,0,0.5)'
})

$('.stick-tag:nth-child(20n-5)').css({
    'background-color': getRandomColor(),
    'box-shadow': '0 0 3px rgba(0,0,0,0.5)'
})

$('.stick-tag:nth-child(20n-4)').css({
    'background-color': getRandomColor(),
    'box-shadow': '0 0 3px rgba(0,0,0,0.5)'
})

$('.stick-tag:nth-child(20n-3)').css({
    'background-color': getRandomColor(),
    'box-shadow': '0 0 3px rgba(0,0,0,0.5)'
})


$('.stick-tag:nth-child(20n-2)').css({
    'background-color': getRandomColor(),
    'box-shadow': '0 0 3px rgba(0,0,0,0.5)'
})

$('.stick-tag:last-child').css({
    'background-color': getRandomColor(),
    'box-shadow': '0 0 3px rgba(0,0,0,0.5)'
})


$(document).ready(
    // ---------------------遮罩层和表单层---------------------------
    // 当点击按钮时遮罩层和表单会出现    
    $('.update-project-btn').click(
        function() {
            // 淡入动画效果
            $(".all-shadow").fadeIn();
            $(".popform").slideDown();
            // $(".popform").fadeIn(3000);
        }
    ),

    $('.add-bug-btn').click(
        function() {
            // 淡入动画效果
            $(".all-shadow").fadeIn();
            $(".bug-popform").slideDown();
            // $(".popform").fadeIn(3000);
        }
    ),
    $('.view-btn').click(
        function() {
            // 淡入动画效果
            $(".all-shadow").fadeIn();
            $(".view-popform").slideDown();
            // $(".popform").fadeIn(3000);
        }
    ),

    // 点击按钮时，遮罩层和表单层均会消失
    $('.close').click(
        function() {
            // 淡入动画效果
            $(".all-shadow").fadeOut();
            $(".popform").fadeOut('slow');
            $(".bug-popform").fadeOut('slow');
            $(".view-popform").fadeOut('slow');

        }
    ),

    // 点击弹窗上的关闭按钮旋转动画
    $('.close').rotate({
        bind: {
            mouseover: function() {
                $(this).rotate({
                    animateTo: 180
                });
            },
            mouseout: function() {
                $(this).rotate({
                    animateTo: 0
                });
            }
        }
    }),

    // 点击删除按钮,提示是否确定是否删除
    $('.delete-btn').click(
        function() {
            // 淡入动画效果
            $(".all-shadow").fadeIn();
            $(".confirm").slideDown();
        }
    ),
    // 取消删除按钮事件绑定
    $('.cancel-btn').click(
        function() {
            // 淡出动画效果
            $(".all-shadow").fadeOut();
            $(".confirm").slideUp();
        }
    ),

    // 确定删除按钮事件绑定
    $('.confirm-btn').click(
        function() {
            // 1. 发送ajax请求

            // 2. 获取请求信息

            // 3. 执行提示信息


            // 弹出框与遮罩层消失
            $(".all-shadow").fadeOut();
            $(".confirm").slideUp();
            // 提示删除信息
            $('.message-true').text("删除成功");
            $('.message-true').css({
                'color': 'white',
                'font-size': '15px'
            });
            $('.message-true').slideDown();
            $('.message-true').fadeOut(1500);
        }
    ),


    // ------------------------------表单事件绑定--------------------------------

    // 开源与否判断
    $('#open-flag').change(function() {
        var type = ''
    }),

    // 项目上线地址失去焦点
    $('#pname').blur(function() {
        var value = $('#pname').val()
        if (value == null || value == "") {
            $('.p-name-msg').text("此项不能为空")
            $('.p-name-msg').css({
                'color': 'red',
                'font-size': '15px',
                'font-weight': '500',
                'display': 'inline'
            })
            $('#pname').css('border', '1px red solid')
            return false;
        } else {
            $('.p-name-msg').text("√")
            $('.p-name-msg').css({
                'color': 'green',
                'font-size': '15px',
                'display': 'inline'
            })
            $('#pname').css('border', '0px')
            return true;
            // 发送Ajax异步请求,后端进行校验,进行双重判断
        }
    }),
    // 项目上线地址聚焦
    $('#ponline').focus(function() {
        $('.p-online-msg').text("记得http或https")
        $('.p-online-msg').css({
            'color': 'red',
            'font-size': '15px',
            'display': 'inline'
        })
    }),
    // 项目上线地址失去焦点
    $('#ponline').blur(function() {
        var value = $('#ponline').val()
        if (value == null || value == "") {
            $('.p-online-msg').text("√")
            $('.p-online-msg').css({
                'color': 'green',
                'font-size': '15px',
                'display': 'inline'
            })
            $('#ponline').attr('placeholder', '未上线')
            $('#ponline').css('border', '0px')
            return true;
        } else {
            // 发送ajax请求
            // 创建对象
            const xhr = new XMLHttpRequest();
            var url = value;
            // 初始化,设置请求方法和URL
            xhr.open('GET', url);
            // 发送请求
            xhr.send()
                // 事件绑定
            xhr.onreadystatechange = function() {
                // 4表示服务端返回了所有结果
                if (xhr.readyState == 4) {
                    // 判断响应状态
                    if (xhr.status >= 200 && xhr.status < 400) {
                        $('.p-online-msg').text("√")
                        $('.p-online-msg').css({
                            'color': 'green',
                            'font-size': '15px',
                            'display': 'inline'
                        })
                        $('#ponline').css('border', '0px')
                        return true;
                    } else {
                        $('.p-online-msg').text("无效网址")
                        $('.p-online-msg').css({
                            'color': 'red',
                            'font-size': '15px',
                            'font-weight': '500',
                            'display': 'inline'
                        })
                        $('#ponline').css('border', '1px red solid')
                        return false;
                    }
                }
            }
        }
    }),
    // 技术栈获取焦点
    $('#pstick').focus(function() {
        $('.p-stick-msg').text("请使用'+'分割")
        $('.p-stick-msg').css({
            'color': 'red',
            'font-size': '15px',
            'display': 'inline'
        })
    }),
    // 技术栈失去焦点
    $('#pstick').blur(function() {
        var value = $('#pstick').val()
        var flag = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]")
        if (value == null || value == "") {
            $('.p-stick-msg').text("内容不能为空")
            $('.p-stick-msg').css({
                'color': 'red',
                'font-size': '15px',
                'font-weight': '500',
                'display': 'inline'
            })
            $('#pstick').css('border', '1px red solid')
            return false;
        } else if (flag.test(value)) {
            $('.p-stick-msg').text("包含非法字符")
            $('.p-stick-msg').css({
                'color': 'red',
                'font-size': '15px',
                'font-weight': '500',
                'display': 'inline'
            })
            return false;
        } else {
            $('.p-stick-msg').text("√")
            $('.p-stick-msg').css({
                'color': 'green',
                'font-size': '15px',
                'display': 'inline'
            })
            $('#pstick').css('border', '0px')
            return true;
            // 发送Ajax异步请求,后端进行校验,进行双重判断
        }
    }),
    // 开源地址获取焦点
    $('#popensource').focus(function() {
        $('.p-opensource-msg').text("记得http或https")
        $('.p-opensource-msg').css({
            'color': 'red',
            'font-size': '15px',
            'display': 'inline'
        })
    }),
    // 开源地址失去焦点
    $('#popensource').blur(function() {
        var value = $('#popensource').val()
        if (value == null || value == "") {
            $('.p-opensource-msg').text("√")
            $('.p-opensource-msg').css({
                'color': 'green',
                'font-size': '15px',
                'display': 'inline'
            })
            $('#popensource').attr('placeholder', '未上线')
            $('#popensource').css('border', '0px')
            return true;
        } else {
            // 发送ajax请求
            // 创建对象
            const xhr = new XMLHttpRequest();
            var url = value;
            // 初始化,设置请求方法和URL
            xhr.open('GET', url);
            // 发送请求
            xhr.send()
                // 事件绑定
            xhr.onreadystatechange = function() {
                // 4表示服务端返回了所有结果
                if (xhr.readyState == 4) {
                    // 判断响应状态
                    if (xhr.status >= 200 && xhr.status < 400) {
                        $('.p-opensource-msg').text("√")
                        $('.p-opensource-msg').css({
                            'color': 'green',
                            'font-size': '15px',
                            'display': 'inline'
                        })
                        $('#popensource').css('border', '0px')
                        return true;
                    } else {
                        $('.p-opensource-msg').text("无效网址")
                        $('.p-opensource-msg').css({
                            'color': 'red',
                            'font-size': '15px',
                            'font-weight': '500',
                            'display': 'inline'
                        })
                        $('#popensource').css('border', '1px red solid')
                        return false;
                    }
                }
            }
        }
    }),
    $('.submit-btn').click(function() {


    }),
)